<style type="text/css">
  .blog_list_default .blog_content ul {
    display: grid;
    grid-row-gap: 40px;
    grid-column-gap: 30px;
    grid-template-columns: repeat(var(--pc-number), 1fr);
  }
  .blog_list_default .blog_content li {
    text-align: center;
    list-style-type: none;
    overflow: hidden;
  }
  .blog_list_default .blog_content li .blog_pic {
    width: 100%;
    display: inline-block;
    margin-bottom: 30px;
  }
  .blog_list_default .blog_content li .blog_pic img {
    width: 100%;
  }

  .blog_list_default .blog_content li .blog_title {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--title_color);
    font-size: var(--product_font_size);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .blog_list_default .blog_content li .blog_time {
    color: #999;
    margin-top: 0.8rem;
  }

  .blog_list_default .blog_content li .blog_list_detail {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--detail_color);
  }

  .blog_list_default .blog_content li .blog_read_more {
    display: block;
    margin-top: 5px;
    text-decoration: underline;
    color: #557fbf;
  }

  .blog_list_default .blog_top_detail {
    margin-bottom: 20px;
  }
  .blog_list_default .blog_top_detail:empty {
    margin-bottom: 0;
  }

  .blog_list_default :is(.blog_top_detail, .blog_bottom_detail) {
    text-align: center;
  }

  @media screen and (max-width: 767px) {
    .blog_list_default .blog_content ul {
      grid-template-columns: repeat(1, calc(100%)) !important;
      grid-row-gap: 30px;
    }
    .blog_list_default .blog_content li .blog_pic {
      margin-bottom: 20px;
    }
  }
</style>

{% assign data = section.settings %}

<div class="blog_list_default container_wrapper">
  <h1 class="title">{{ news_detail.title }}</h1>
  <div class="blog_top_detail">{{ news_detail.top_descript_oss_bucket }}</div>
  <div class="plugin-container-header"></div>

  <div class="blog_content" style="--pc-number: {{ data.number | default:3 }};">
    {% assign list_size = posts.list | size %}
    {% if list_size > 0 %}
      <ul>
        {% for item in posts.list %}
          {%- if item.image_alt == "" -%}
            {% assign article_alt = item | image_alt:'blog'   %}
          {%- else -%}
            {% assign article_alt = item.image_alt %}
          {%- endif -%}
          <li>
            {%- unless data.is_show_img == false -%}
            <a class="blog_pic" href="/blogs/{{item.handle}}"
              ><img
                data-src="{{ item.src|public_front_asset_url }}"
                src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"
                alt="{{ article_alt }}"
            ></a>
          {%- endunless -%}
            {%- unless data.blog_title == false -%}
            <a class="blog_title" href="/blogs/{{item.handle}}">{{ item.title }}</a>
            {%- endunless -%}
            {%- unless data.blog_descript == false -%}
            <div class="blog_list_detail">{{ item.descript|html_content_filter }}</div>
            {%- endunless -%}
            {%- unless data.date == false -%}
             <span data-date="{{item.published_at}}" data-format="YYYY-mm-dd">{{ item.published_at | date: "%Y-%m-%d" }}</span>
            {%- endunless -%}
            {%- if data.read_more != '' -%}
              <div class="blog_read_more">
                <a href="/blogs/{{ item.handle }}">{{ data.read_more }}</a>
              </div>
            {%- endif -%}
         
          </li>
        {% endfor %}
      </ul>

      {% include pagination , { paginate : posts.paginate } %}
    {% else %}
      {% include 'empty', text: lang.blogs.list.empty %}
    {% endif %}
  </div>
  <div class="blog_bottom_detail">{{ news_detail.bottom_descript_oss_bucket }}</div>
  <div class="plugin-container-footer"></div>
</div>

{% schema %}
{
	"tag": "section",
	"class": "blog_collection_detail",
	"is_global": false,
	"name": {
		"zh_CN": "博客专辑详情",
		"en_US": "Blog collection detail"
	},
	"max_blocks": 20,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
    {
			"type": "card_switch",
			"label": {
				"zh_CN": "显示封面图片",
				"en_US": "Show cover image"
			},
			"id": "is_show_img",
			"default": "true"
		},
    {
			"type": "card_input_number",
			"max": 80,
			"min": 8,
			"id": "pagesize",
			"label": {
				"zh_CN": "博客每页数量",
				"en_US": "Number of blogs per page"
			},
			"info": {
				"zh_CN": "默认数量12个;最小8个、最大80个;",
				"en_US": "Default number 12, minimum 8, maximum 80;"
			},
			"refresh": true,
			"default": 12
		},
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "每排数量",
        "en_US": "Number of rows"
      },
      "id": "number",
      "max": 5,
      "min": 1,
      "unit": "",
      "default": 3,
      "info": {
        "zh_CN": "只对PC有效",
        "en_US": "Only valid for PC"
      }
    },
		{
			"type": "card_switch",
			"id": "date",
			"label": {
				"zh_CN": "显示日期",
				"en_US": "Show date"
			},
			"default": false
		},
		{
			"type": "card_switch",
			"id": "blog_title",
			"label": {
				"zh_CN": "显示博客标题",
				"en_US": "Show blog title"
			},
			"default": true
		},
		{
			"type": "card_switch",
			"id": "blog_descript",
			"label": {
				"zh_CN": "显示简短描述",
				"en_US": "Show a short description"
			},
			"default": true
		},
    {
      "type": "card_input",
      "label": {
        "zh_CN": "阅读全文文案",
        "en_US": "Read more text"
      },
      "id": "read_more",
      "default": "Read More >"	
    }
	],
	"blocks": [],
	"default": {
		"settings": {
			"date": false,
      "read_more":"Read More >",
      "is_show_img":true,
      "number":3,
      "pagesize":12,
			"author": false,
			"blog_title": true,
      "refresh": true,
			"blog_descript": true
		},
		"blocks": []
	}
}
{% endschema %}
